import { Button } from "antd";
import React, { useState } from "react";

const FunctionComponent: React.FC = () => {
  const [value, setValue] = useState<number>(() => {
    console.log("initialValue");
    return 1;
  });

  const log = () => {
    setTimeout(() => {
      setValue(value => value + 1);
      console.log(value);
    });
  };

  /* useEffect(() => {
    setValue(4); // render会执行三次，每一次setValue，函数组件都会被执行
  }); */

  console.log("render...");

  return (
    <>
      <p>value:{value}</p>
      <Button onClick={log}>alert</Button>&nbsp;
      <Button onClick={() => setValue(value => value + 1)}>add</Button>
    </>
  );
};
export default FunctionComponent;

/**
 * 如果先点击alert，再点击add，那么弹窗中的值和页面中的value分别是什么
 * 答案：alert(1) value=2
 */
